import React, { Component } from 'react'
import { NavBar,List,Button,Toast } from 'antd-mobile';
import xiaohigh from './images/xiaohigh.jpg';
import axios from 'axios';
import './index.less';

const Item = List.Item;
export default class UserCenter extends Component {

    state = {
        nickname:'',
        phone: '',
        profile: ''
    }

    //检查当前用户是否已经登录
    async componentDidMount(){
        //检测
        let result = await axios.post('/login/verify');
        console.log(result);
        //判断结果
        if(result.data.code === 20000){
            let {nickName, phone,avatar} = result.data.data;
            //成功 设置用户的登录信息
            this.setState({
                nickname: nickName,
                phone: phone,
                profile: avatar
            });

        }else{
            Toast.fail('您还没有登录, 请先登录', 2);
            //没有登录, 跳转至登录页面
            this.props.history.push('/login');
        }
    }

    //退出登录
    logout = async () => {
        let result = await axios.post('/logout');
        //获取返回结果
        if(result.data.code === 20000){
            //成功
            Toast.success('退出成功', 1);
            this.props.history.push('/login');
        }else{
            Toast.fail('退出失败', 1);
        }
    }

    render() {
        return (
            <div className="user-page">
                {/* 顶部导航 start */}
                <NavBar mode="light" >个人中心</NavBar>
                {/* 顶部导航 end */}

                {/* 图片区域 start */}
                <div className="img">
                    {/* <img src={this.state.profile} alt="" /> */}
                    <img src={xiaohigh} alt="" />
                </div>
                {/* 图片区域 end */}

                <div className="gap-20"></div>
                <div className="gap-10"></div>
                {/* 信息区域 start */}
                <div className="profile">
                    <List className="my-list">
                        <Item extra={this.state.nickname}>昵称</Item>
                        <Item extra={this.state.phone}>手机号</Item>
                    </List>
                </div>
                {/* 信息区域 end */}
                <div className="gap-20"></div>
                <div className="gap-20"></div>
                <div className="gap-10"></div>
                {/* 退出登录按钮 */}
                <Button type="warning" onClick={this.logout}>退出登录</Button>
            </div>

        )
    }
}
